<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5页面编辑器</title>
    <link href="./assets/css/app.css" rel="stylesheet">

    <script type="text/javascript">
        window.require = {
            config: {
                site: {
                    name: "pageEditor",
                    cdnurl: ".\/",
                    version: new Date().getTime(),
                },
                actionname: "index",
                jsname: "app\/test"
            }
        };
    </script>
</head>
<body>
<div class="page-editor-container">
    <div class="page-editor">
        <div class="container">
            <div id="pageeditor" class="row relative w840">
                <div id="pageeditor-page"></div>

                <div class="diy-editor form-horizontal" id="diy-editor">
                    <div class="editor-arrow"></div>
                    <div class="inner">
                        <div id="pageeditor-property-tab"></div>
                    </div>
                </div>

                <div id="pageeditor-tools"></div>
            </div>
        </div>
    </div>
</div>

<!--js入口文件-->
<script src="./assets/js/require.js" data-main="./assets/js/require-app.js"></script>
</body>
</html>

<script type="text/html" id="tpl_pageeditor_page">
    <div class="diy-phone" data-merch="0">
        <div class="phone-head"></div>
        <div class="phone-body">
            <div class="phone-title" id="page">
                {{title}}
            </div>
            <div class="phone-main" id="phone" style="background-color:{{background}};">
                <p style="text-align: center; line-height: 400px">您还没有添加任何元素</p>
            </div>
        </div>
        <div class="phone-foot"></div>
    </div>
</script>

<script type="text/html" id="tpl_edit_pageeditor_page">

    <div class="form-group">
        <div class="col-sm-2 control-label">页面名称</div>
        <div class="col-sm-10">
            <input class="form-control input-sm diy-bind" data-bind="name" data-placeholder="请输入名称"
                   placeholder="请输入名称" value="{{page.name}}"/>
            <div class="help-block">注意：页面名称是便于后台查找。</div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">页面标题</div>
        <div class="col-sm-10">
            <input class="form-control input-sm diy-bind" data-bind="title" data-placeholder="请输入标题"
                   placeholder="请输入标题" value="{{page.title}}"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">关键字</div>
        <div class="col-sm-10">
            <input class="form-control input-sm diy-bind" data-bind="keyword" data-placeholder=""
                   placeholder="请输入标题" value="{{page.keyword}}"/>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">页面介绍</div>
        <div class="col-sm-10">
            <textarea class="form-control richtext diy-bind" cols="70" rows="5" placeholder="请输入页面介绍"
                      data-bind="desc" data-placeholder="">{{page.desc}}</textarea>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">封面图</div>
        <div class="col-sm-10">
            <div class="input-group">
                <input class="form-control input-sm diy-bind" data-bind="icon" data-placeholder=""
                       placeholder="" value="{{page.img}}" id="iconsrc"/>
                <span data-input="#iconsrc" data-img="#iconimg" data-toggle="selectImg"
                      class="input-group-addon btn btn-default">选择图片</span>
            </div>
            <div class="input-group " style="margin-top:.5em;">
                <img src="{{page.img}}"
                     onerror="this.src='./assets/img/nopic.png';"
                     class="img-responsive img-thumbnail" width="150" id="iconimg">
                <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片"
                    onclick="$('#iconsrc').val('').trigger('change');$(this).prev().attr('src', '')">×</em>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">背景颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="background"
                       value="{{page.background}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('{{page.background}}').trigger('propertychange')">重置</span>
            </div>
        </div>
    </div>

</script>

<script type="text/html" id="tpl_pageeditor_tools">
    <div class="diy-menu">
        <div class="navs" id="navs">
            <nav class="btn btn-link page-setup" data-id="pageeditor_page"><i class="fa fa-cog"></i> 页面设置</nav>
            {{each tools as group}}
            <div class="{{group.class}}">
                <div class="title">{{group.name}}</div>
                {{each group.navs as nav}}
                <nav class="btn btn-link special" data-id="{{nav.id}}">{{nav.name}}</nav>
                {{/each}}
            </div>
            {{/each}}
        </div>
        <div class="action">
            <nav class="btn btn-success btn-sm btn-save">保存</nav>
        </div>
    </div>
</script>

<script type="text/html" id="edit-del">
    <div class="btn-edit-del">
        <div class="btn-edit">编辑</div>
        <div class="btn-del">删除</div>
    </div>
</script>

<script type="text/html" id="tpl_show_title">
    <div class="drag" data-itemid="{{itemid}}">
        <div class="fui-title"
             style="background: {{style.background}}; color: {{style.color}}; font-size: {{style.fontSize}}px; text-align: {{style.textAlign}}; padding: {{style.paddingTop}}px {{style.paddingLeft}}px;">
            {{if params.icon}}
            <i class="icon {{params.icon}}"></i>
            {{/if}}
            {{if params.link}}
            <a href="{{params.link}" style="color: {{style.color||''}}">{{params.title||'请输入标题内容'}}</a>
            {{else}}
            {{params.title||'请输入标题内容'}}
            {{/if}}
        </div>
    </div>
</script>

<script type="text/html" id="tpl_edit_title">
    <div class="form-group">
        <div class="col-sm-2 control-label">背景颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="style.background"
                       value="{{style.background}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#ffffff').trigger('propertychange')">清除</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">文字颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="style.color" value="{{style.color}}"
                       type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#ffffff').trigger('propertychange')">清除</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">标题文字</div>
        <div class="col-sm-10">
            <div class="input-group form-group" style="margin: 0;">
                <input class="form-control input-sm diy-bind" data-bind="params.title"
                       data-placeholder="" placeholder="请输入标题" value="{{params.title}}"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('').trigger('click');">清除</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">标题链接</div>
        <div class="col-sm-10">
            <div class="input-group form-group" style="margin: 0;">
                <input class="form-control input-sm diy-bind" data-bind="params.link"
                       data-placeholder="" placeholder="" value="{{params.link}}" id="titlelink"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">对齐方向</div>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input type="radio" name="textAlign" value="left" class="diy-bind" data-bind="style.textAlign" {{if style.textAlign=='left'}}checked="checked"{{/if}}>居左
            </label>
            <label class="radio-inline">
                <input type="radio" name="textAlign" value="center" class="diy-bind" data-bind="style.textAlign" {{if style.textAlign=='center'}}checked="checked"{{/if}}>居中
            </label>
            <label class="radio-inline">
                <input type="radio" name="textAlign" value="right" class="diy-bind" data-bind="style.textAlign" {{if style.textAlign=='right'}}checked="checked"{{/if}}>居右
            </label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">文字大小</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.fontSize}}" data-min="9" data-max="30"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.fontSize}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.fontSize"
                       value="{{style.fontSize}}" type="hidden"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">上下边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.paddingTop}}" data-min="1" data-max="30"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.paddingTop}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.paddingTop"
                       value="{{style.paddingTop}}" type="hidden"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">左右边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.paddingLeft}}" data-min="1"
                     data-max="30"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.paddingLeft}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.paddingLeft"
                       value="{{style.paddingLeft}}" type="hidden"/>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="tpl_show_blank">
    <div class="drag" data-itemid="{{itemid}}"
         style="height: {{style.height}}px; background: {{style.background}}"></div>
</script>

<script type="text/html" id="tpl_edit_blank">
    <div class="form-group">
        <div class="col-sm-2 control-label">背景颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="style.background"
                       value="{{style.background}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#ffffff').trigger('propertychange')">清除</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">元素高度</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.height}}" data-min="1" data-max="200"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.height}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.height"
                       value="{{style.height}}" type="hidden"/>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="tpl_show_search">
    <div class="drag" data-itemid="{{itemid}}">
        <div class="diy-search {{style.searchStyle}}"
             style="background: {{style.background}}; padding: {{style.paddingTop||'10'}}px {{style.paddingLeft||'10'}}px;">
            <div class="inner left" style="background: {{style.inputBackground||'#fff'}};">
                <div class="search-icon" style="color: {{style.iconColor}};"><i class="icon icon-search"></i>
                </div>
                <div class="search-input" style="text-align: {{style.textAlign}}; color: {{style.color}};">
                    <span>{{params.placeholder}}</span>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="tpl_edit_search">

    <div class="form-group">
        <div class="col-sm-2 control-label">背景颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="style.background"
                       value="{{style.background}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#f1f1f2').trigger('propertychange')">重置</span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">输入框背景</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="style.inputBackground"
                       value="{{style.inputBackground}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#ffffff').trigger('propertychange')">重置</span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">文字颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="style.color" value="{{style.color}}"
                       type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#999999').trigger('propertychange')">重置</span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">图标颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="style.iconColor"
                       value="{{style.iconColor}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#b4b4b4').trigger('propertychange')">重置</span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">提示文字</div>
        <div class="col-sm-10">
            <input class="form-control input-sm diy-bind" data-bind="params.placeholder"
                   data-placeholder="" placeholder="请输入提示文字(不填则不显示，最长20字)" value="{{params.placeholder}}"
                   maxlength="20"/>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">上下边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.paddingTop}}" data-min="2" data-max="30"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.paddingTop}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.paddingTop"
                       value="{{style.paddingTop}}" type="hidden"/>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">左右边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.paddingLeft}}" data-min="2"
                     data-max="30"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.paddingLeft}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.paddingLeft"
                       value="{{style.paddingLeft}}" type="hidden"/>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">搜索框样式</div>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input type="radio" name="searchStyle" value="" class="diy-bind"
                       data-bind="style.searchStyle"
                       {{if style.searchStyle==''}}checked="checked"{{/if}}>
                方形
            </label>
            <label class="radio-inline">
                <input type="radio" name="searchStyle" value="radius" class="diy-bind" data-bind="style.searchStyle"
                       {{if style.searchStyle=='radius'}}checked="checked"{{/if}}>
                圆角
            </label>
            <label class="radio-inline">
                <input type="radio" name="searchStyle" value="round" class="diy-bind" data-bind="style.searchStyle"
                       {{if style.searchStyle=='round'}}checked="checked"{{/if}}>
                圆弧
            </label>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">文字对齐</div>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input type="radio" name="textAlign" value="left" class="diy-bind" data-bind="style.textAlign"
                       {{if style.textAlign=='left'}}checked="checked"{{/if}}>
                居左
            </label>
            <label class="radio-inline">
                <input type="radio" name="textAlign" value="center" class="diy-bind" data-bind="style.textAlign"
                       {{if style.textAlign=='center'}}checked="checked"{{/if}}>
                居中
            </label>
            <label class="radio-inline">
                <input type="radio" name="textAlign" value="right" class="diy-bind" data-bind="style.textAlign"
                       {{if style.textAlign=='right'}}checked="checked"{{/if}}>
                居右
            </label>
        </div>
    </div>

</script>

<script type="text/html" id="tpl_show_line">
    <div class="drag" data-itemid="{{itemid}}">
        <div class="fui-line-diy" style="background: {{style.background}}; padding: {{style.padding}}px 0;">
            <div class="line"
                 style="border-top: {{style.height||'2'}}px {{style.lineStyle||'solid'}} {{style.borderColor||'#000000'}};"></div>
        </div>
    </div>
</script>
<script type="text/html" id="tpl_edit_line">
    <div class="form-group">
        <div class="col-sm-2 control-label">背景颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="style.background"
                       value="{{style.background}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#ffffff').trigger('propertychange')">清除</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">线条颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind color" data-bind="style.borderColor"
                       value="{{style.borderColor}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#ffffff').trigger('propertychange')">清除</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">线条样式</div>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input type="radio" name="lineStyle" value="solid" class="diy-bind" data-bind="style.lineStyle"
                       {{if style.lineStyle=='solid'}}checked="checked"{{/if}}>
                实线
            </label>
            <label class="radio-inline">
                <input type="radio" name="lineStyle" value="dashed" class="diy-bind" data-bind="style.lineStyle"
                       {{if style.lineStyle=='dashed'}}checked="checked"{{/if}}>
                虚线(长方形)
            </label>
            <label class="radio-inline">
                <input type="radio" name="lineStyle" value="dotted" class="diy-bind" data-bind="style.lineStyle"
                       {{if style.lineStyle=='dotted'}}checked="checked"{{/if}}>
                虚线(正方形)
            </label>
            <label class="radio-inline">
                <input type="radio" name="lineStyle" value="double" class="diy-bind" data-bind="style.lineStyle"
                       {{if style.lineStyle=='double'}}checked="checked"{{/if}}>
                双实线
            </label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">线条高度</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.height}}" data-min="1" data-max="20"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.height}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.height"
                       value="{{style.height}}" type="hidden"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">上下边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.padding}}" data-min="1" data-max="30"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.height}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.padding"
                       value="{{style.padding}}" type="hidden"/>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="tpl_show_banner">
    <div class="drag" data-itemid="{{itemid}}">
        <div class="diy-banner">
            {{each data as item}}
            <img src="{{item.imgUrl}}"/>
            {{/each}}
            <div class="dots {{style.dotAlign||'left'}} {{style.dotStyle||'rectangle'}}"
                 style="padding: 0 {{style.leftRight||'10'}}px; bottom: {{style.bottom||'10'}}px; opacity: {{style.opacity||'0.8'}};">
                {{each data as item}}
                <span style="background: {{style.background||'#000000'}};"></span>
                {{/each}}
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="tpl_edit_banner">
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮形状</div>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input type="radio" name="dotStyle" value="rectangle" class="diy-bind" data-bind="style.dotStyle"
                {{if style.dotStyle=='rectangle'}}checked="checked"{{/if}} >
                长方形
            </label>
            <label class="radio-inline">
                <input type="radio" name="dotStyle" value="square" class="diy-bind" data-bind="style.dotStyle"
                {{if style.dotStyle=='square'}}checked="checked"{{/if}}>
                正方形
            </label>
            <label class="radio-inline">
                <input type="radio" name="dotStyle" value="round" class="diy-bind" data-bind="style.dotStyle"
                {{if style.dotStyle=='round'}}checked="checked"{{/if}}>
                圆形
            </label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮位置</div>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input type="radio" name="dotAlign" value="left" class="diy-bind" data-bind="style.dotAlign"
                {{if style.dotAlign=='left'}}checked="checked"{{/if}} >
                居左
            </label>
            <label class="radio-inline">
                <input type="radio" name="dotAlign" value="center" class="diy-bind" data-bind="style.dotAlign"
                {{if style.dotAlign=='center'}}checked="checked"{{/if}}>
                居中
            </label>
            <label class="radio-inline">
                <input type="radio" name="dotAlign" value="right" class="diy-bind" data-bind="style.dotAlign"
                {{if style.dotAlign=='right'}}checked="checked"{{/if}}>
                居右
            </label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind" data-bind="style.background" value="{{style.background}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#ffffff').trigger('propertychange')">清除</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮左右边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.leftRight}}" data-min="5" data-max="50"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.leftRight}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.leftRight"
                       value="{{style.leftRight}}" type="hidden"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮底部边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.bottom}}" data-min="5" data-max="30"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.bottom}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.bottom"
                       value="{{style.bottom}}" type="hidden"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">透明度</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8 " data-value="{{style.opacity}}" data-min="0" data-max="10"
                     data-decimal="10"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.opacity}}</span>(最大是1)</div>
                <input class="diy-bind input" data-bind="style.opacity"
                       value="{{style.opacity}}" type="hidden"/>
            </div>
        </div>
    </div>
    <div class="form-items" data-min="1">
        <div class="inner" id="form-items">
            {{each data as child itemid }}
            <div class="item" data-id="{{itemid}}">
                <span class="btn-del" title="删除"></span>
                <div class="item-image">
                    <img src="{{child.imgUrl}}"
                         onerror="this.src='./assets/img/nopic.jpg';"
                         id="pimg-{{itemid}}"/>
                </div>
                <div class="item-form">
                    <div class="input-group" style="margin-bottom:0px; ">
                        <input type="text" class="form-control input-sm diy-bind" data-bind="data.{{itemid}}.imgUrl" id="cimg-{{itemid}}"
                               placeholder="请选择图片或输入图片地址" value="{{child.imgUrl}}"/>
                        <span class="input-group-addon btn btn-default" data-toggle="selectImg"
                              data-input="#cimg-{{itemid}}" data-img="#pimg-{{itemid}}">选择图片</span>
                    </div>
                    <div class="input-group" style="margin-top:10px; margin-bottom:0px; ">
                        <input type="text" class="form-control input-sm diy-bind" data-bind="data.{{itemid}}.linkUrl" id="curl-{{itemid}}"
                               placeholder="请选择链接或输入链接地址" value="{{child.linkUrl}}"/>
                        <span class="input-group-addon btn btn-default" data-toggle="selectUrl"
                              data-input="#curl-{{itemid}}">选择链接</span>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
        <div class="btn btn-w-m btn-block btn-default btn-outline btn-add"><i class="fa fa-plus"></i> 添加一个
        </div>
    </div>
</script>

<script type="text/html" id="tpl_show_picturew">
    <div class="drag" data-itemid="{{itemid}}">
        {{if params.column == 1}}
            {{data=arrayChunk(data, 4)}}
            {{each data as item index}}
            <div class="d-flex" style="background: {{style.background?style.background:'#000'}};">
                <div style="padding: {{index == 0 ? style.paddingtop : 0}}px {{style.paddingleft}}px {{style.paddingtop}}px;flex: 0 0 {{ item.length>1 ? 50 : 100;}}%;width: {{ item.length>1 ? 50 : 100;}}%;">
                    <img class="img-fluid" src="{{item[0].imgurl}}" style="width: 100%; height: 100%">
                </div>
                {{if item.length > 1}}
                <div style="padding:  {{index == 0 ? style.paddingtop : 0}}px {{style.paddingleft}}px {{style.paddingtop}}px 0;flex: 0 0 50%;width: 50%;">
                    <div class="d-flex" style="padding: 0 0 {{ item.length == 2 ? 0 : style.paddingleft/2}}px 0;flex-wrap:nowrap;">
                        <div style="width: 100%;">
                            <img class="img-fluid" src="{{item[1].imgurl}}" style="width: 100%;">
                        </div>
                    </div>
                    {{if item.length > 2}}
                    <div class="d-flex" style="padding: {{style.paddingleft/2}}px 0 0 0;flex-wrap:nowrap;">
                        <div style="padding: 0 {{style.paddingleft/2}}px 0 0; width: 100%;">
                            <img class="img-fluid" src="{{item[2].imgurl}}" style="width: 100%;">
                        </div>
                        {{if item.length > 3}}
                        <div style="padding: 0 0 0 {{style.paddingleft/2}}px; width: 100%;">
                            <img class="img-fluid" src="{{item[3].imgurl}}" style="width: 100%;">
                        </div>
                        {{/if}}
                    </div>
                    {{/if}}
                </div>
                {{/if}}
            </div>
            {{/each}}
        {{else if params.showtype == 0}}
        <div class="fui-picturew row-{{params.column}} d-flex swiper-slide" style="padding: {{style.paddingtop}}px; {{style.paddingleft}}px; background:  {{style.background?style.background:'#000'}};">
            {{each data as item}}
            <div class="item" style="padding: {{style.paddingtop}}px {{style.paddingleft}}px;flex: 0 0 {{100/params.column}}%;">
                <img class="img-fluid" src="{{item.imgurl}}" style="width: 100%;">
            </div>
            {{/each}}
        </div>
        {{else}}
        <div class="diy-picturew" id="picturew-{{itemid}}">
            <div class="">
                {{data=arrayChunk(data, params.column*params.rownum)}}
                <div class="fui-picturew row-{{params.column}} d-flex" style="padding: {{style.paddingtop}}px; {{style.paddingleft}}px; background:  {{style.background?style.background:'#000'}};">
                    {{each data[0] as item}}
                    <div class="item" style="padding: {{style.paddingtop}}px {{style.paddingleft}}px;flex: 0 0 {{100/params.column}}%;">
                        <img class="img-fluid" src="{{item.imgurl}}" style="width: 100%;">
                    </div>
                    {{/each}}
                </div>
            </div>
            {{if style.showbtn == 1}}
            <div class="dots {{style.dotAlign||'left'}} {{style.dotStyle||'rectangle'}}"
                 style="padding: 0 {{style.leftRight||'10'}}px; bottom: {{style.bottom||'10'}}px; opacity: {{style.opacity||'0.8'}};">
                {{each data as item}}
                <span style="background: {{style.background||'#000000'}};"></span>
                {{/each}}
            </div>
            {{/if}}
        </div>
        {{/if}}
    </div>
</script>

<script type="text/html" id="tpl_edit_picturew">

    <div class="form-group">
        <div class="col-sm-2 control-label">上下边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.paddingtop}}" data-min="0" data-max="50"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.paddingtop}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.paddingtop" value="{{style.paddingtop}}" type="hidden" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">左右边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.paddingleft}}" data-min="0" data-max="50"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.paddingleft}}</span>px(像素)</div>
                <input class="diy-bind input"  data-bind="style.paddingleft" value="{{style.paddingleft}}" type="hidden" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">背景颜色</div>
        <div class="col-sm-4">
            <div class="input-group">
                <input class="form-control input-sm diy-bind color"  data-bind="style.background" value="{{style.background}}" type="color" />
                <span class="input-group-addon btn btn-default" onclick="$(this).prev().val('#ffffff').trigger('propertychange')">清除</span>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">布局方式</div>
        <div class="col-sm-10">
            <label class="radio-inline"><input type="radio" name="row" value="2" class="diy-bind"  data-bind="params.column" data-bind-init="true" {{if params.column=='2'}}checked="checked"{{/if}}> 堆积两列</label>
            <label class="radio-inline"><input type="radio" name="row" value="1" class="diy-bind"  data-bind="params.column" data-bind-init="true" {{if params.column=='1'}}checked="checked"{{/if}}> 橱窗样式</label>
            <label class="radio-inline"><input type="radio" name="row" value="3" class="diy-bind"  data-bind="params.column" data-bind-init="true" {{if params.column=='3'}}checked="checked"{{/if}} > 堆积三列</label>
            <label class="radio-inline"><input type="radio" name="row" value="4" class="diy-bind"  data-bind="params.column" data-bind-init="true" {{if params.column=='4'}}checked="checked"{{/if}} > 堆积四列</label>

            {{if params.column==1}}
                <div class="help-block">橱窗样式布局请参考 <a href="{php echo webUrl('shop/cube')}" target="_blank">首页魔方</a>，单组最多显示四个，超出隐藏</div>
            {{/if}}
            {{if params.column>1}}
            <div class="help-block">图片大小不限制，但请确保所有图片的尺寸/比例相同。</div>
            {{/if}}
        </div>
    </div>

    {{if params.column>1}}
        <div class="form-group">
            <div class="col-sm-2 control-label">显示类型</div>
            <div class="col-sm-10">
                <label class="radio-inline"><input type="radio" name="showtype" value="0" class="diy-bind"  data-bind="params.showtype" data-bind-init="true" {{if params.showtype=='0'||!params.showtype}}checked="checked"{{/if}}> 普通模式</label>
                <label class="radio-inline"><input type="radio" name="showtype" value="1" class="diy-bind"  data-bind="params.showtype" data-bind-init="true" {{if params.showtype=='1'}}checked="checked"{{/if}} > 多页滑动模式</label>
            </div>
        </div>
    {{/if}}

    {{if params.column>1&&params.showtype==1}}
    <div class="form-group">
        <div class="col-sm-2 control-label">每页行数</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{params.rownum||2}}" data-min="1" data-max="12"></div>
                <div class="col-sm-4 control-labe count"><span>{{params.rownum||2}}</span>行</div>
                <input class="diy-bind input"  data-bind="params.rownum" value="{{params.rownum||2}}" type="hidden" />
            </div>
            <div class="help-block">超出设定数量自动分页</div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">分页按钮</div>
        <div class="col-sm-10">
            <label class="radio-inline"><input type="radio" name="showbtn" value="0" class="diy-bind"  data-bind="style.showbtn" {{if style.showbtn=='0'||!style.showbtn}}checked="checked"{{/if}}> 隐藏</label>
            <label class="radio-inline"><input type="radio" name="showbtn" value="1" class="diy-bind"  data-bind="style.showbtn" {{if style.showbtn=='1'}}checked="checked"{{/if}}> 显示</label>
        </div>
    </div>
    {{/if}}

    {{if style.showbtn == 1}}
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮形状</div>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input type="radio" name="dotStyle" value="rectangle" class="diy-bind" data-bind="style.dotStyle"
                       {{if style.dotStyle=='rectangle'}}checked="checked"{{/if}} >
                长方形
            </label>
            <label class="radio-inline">
                <input type="radio" name="dotStyle" value="square" class="diy-bind" data-bind="style.dotStyle"
                       {{if style.dotStyle=='square'}}checked="checked"{{/if}}>
                正方形
            </label>
            <label class="radio-inline">
                <input type="radio" name="dotStyle" value="round" class="diy-bind" data-bind="style.dotStyle"
                       {{if style.dotStyle=='round'}}checked="checked"{{/if}}>
                圆形
            </label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮位置</div>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input type="radio" name="dotAlign" value="left" class="diy-bind" data-bind="style.dotAlign"
                       {{if style.dotAlign=='left'}}checked="checked"{{/if}} >
                居左
            </label>
            <label class="radio-inline">
                <input type="radio" name="dotAlign" value="center" class="diy-bind" data-bind="style.dotAlign"
                       {{if style.dotAlign=='center'}}checked="checked"{{/if}}>
                居中
            </label>
            <label class="radio-inline">
                <input type="radio" name="dotAlign" value="right" class="diy-bind" data-bind="style.dotAlign"
                       {{if style.dotAlign=='right'}}checked="checked"{{/if}}>
                居右
            </label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮颜色</div>
        <div class="col-sm-4">
            <div class="input-group input-group-sm">
                <input class="form-control input-sm diy-bind" data-bind="style.background" value="{{style.background}}" type="color"/>
                <span class="input-group-addon btn btn-default"
                      onclick="$(this).prev().val('#ffffff').trigger('propertychange')">清除</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮左右边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.leftRight}}" data-min="5" data-max="50"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.leftRight}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.leftRight"
                       value="{{style.leftRight}}" type="hidden"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">按钮底部边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.bottom}}" data-min="5" data-max="30"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.bottom}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.bottom"
                       value="{{style.bottom}}" type="hidden"/>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-2 control-label">透明度</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8 " data-value="{{style.opacity}}" data-min="0" data-max="10"
                     data-decimal="10"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.opacity}}</span>(最大是1)</div>
                <input class="diy-bind input" data-bind="style.opacity"
                       value="{{style.opacity}}" type="hidden"/>
            </div>
        </div>
    </div>
    {{/if}}

    <div class="form-items indent" data-min="1" data-max="20">
        <div class="inner" id="form-items">
            {{each data as child itemid }}
            <div class="item" data-id="{{itemid}}">
                <span class="btn-del" title="删除"></span>
                <div class="item-image">
                    <img src="{{child.imgurl}}" onerror="this.src='./assets/img/nopic.png';" id="pimg-{{itemid}}" />
                </div>
                <div class="item-form">
                    <div class="input-group" style="margin-bottom:0px; ">
                        <input type="text" class="form-control input-sm diy-bind" data-bind="data.{{itemid}}.imgurl"  id="cimg-{{itemid}}" placeholder="请选择图片或输入图片地址" value="{{child.imgurl}}" />
                        <span class="input-group-addon btn btn-default" data-toggle="selectImg" data-input="#cimg-{{itemid}}" data-img="#pimg-{{itemid}}">选择图片</span>
                    </div>
                    <div class="input-group" style="margin-top:10px; margin-bottom:0px; ">
                        <input type="text" class="form-control input-sm diy-bind" data-bind="data.{{itemid}}.linkurl" id="curl-{{itemid}}" placeholder="请选择链接或输入链接地址" value="{{child.linkurl}}" />
                        <span class="input-group-addon btn btn-default" data-toggle="selectUrl" data-input="#curl-{{itemid}}">选择链接</span>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
        <div class="btn btn-w-m btn-block btn-default btn-outline  btn-add"><i class="fa fa-plus"></i> 添加一个</div>
    </div>

</script>

<script type="text/html" id="tpl_show_picgroup">
    <div class="drag" data-itemid="{{itemid}}">
        {{each data as item index}}
        <div class="d-flex" style="background: {{style.background?style.background:'#000'}};">
            <div style="padding: {{style.paddingtop}}px {{style.paddingleft}}px;flex: 0 0 100%;width: 100%;">
                <a href="{{item.imglink}}">
                    <img class="img-fluid" src="{{item.imgurl}}" style="width: 100%; height: 100%">
                </a>
            </div>
        </div>
        {{/each}}
    </div>
</script>

<script type="text/html" id="tpl_edit_picgroup">

    <div class="form-group">
        <div class="col-sm-2 control-label">上下边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.paddingtop}}" data-min="0" data-max="50"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.paddingtop}}</span>px(像素)</div>
                <input class="diy-bind input" data-bind="style.paddingtop" value="{{style.paddingtop}}" type="hidden" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">左右边距</div>
        <div class="col-sm-10">
            <div class="form-group">
                <div class="slider col-sm-8" data-value="{{style.paddingleft}}" data-min="0" data-max="50"></div>
                <div class="col-sm-4 control-labe count"><span>{{style.paddingleft}}</span>px(像素)</div>
                <input class="diy-bind input"  data-bind="style.paddingleft" value="{{style.paddingleft}}" type="hidden" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-2 control-label">背景颜色</div>
        <div class="col-sm-4">
            <div class="input-group">
                <input class="form-control input-sm diy-bind color"  data-bind="style.background" value="{{style.background}}" type="color" />
                <span class="input-group-addon btn btn-default" onclick="$(this).prev().val('#ffffff').trigger('propertychange')">清除</span>
            </div>
        </div>
    </div>

    <div class="form-items indent" data-min="1" data-max="20">
        <div class="inner" id="form-items">
            {{each data as child itemid }}
            <div class="item" data-id="{{itemid}}">
                <span class="btn-del" title="删除"></span>
                <div class="item-image">
                    <img src="{{child.imgurl}}" onerror="this.src='./assets/img/nopic.png';" id="pimg-{{itemid}}" />
                </div>
                <div class="item-form">
                    <div class="input-group" style="margin-bottom:0px; ">
                        <input type="text" class="form-control input-sm diy-bind" data-bind="data.{{itemid}}.imgurl"  id="cimg-{{itemid}}" placeholder="请选择图片或输入图片地址" value="{{child.imgurl}}" />
                        <span class="input-group-addon btn btn-default" data-toggle="selectImg" data-input="#cimg-{{itemid}}" data-img="#pimg-{{itemid}}">选择图片</span>
                    </div>
                    <div class="input-group" style="margin-top:10px; margin-bottom:0px; ">
                        <input type="text" class="form-control input-sm diy-bind" data-bind="data.{{itemid}}.linkurl" id="curl-{{itemid}}" placeholder="请选择链接或输入链接地址" value="{{child.linkurl}}" />
                        <span class="input-group-addon btn btn-default" data-toggle="selectUrl" data-input="#curl-{{itemid}}">选择链接</span>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
        <div class="btn btn-w-m btn-block btn-default btn-outline  btn-add"><i class="fa fa-plus"></i> 添加一个</div>
    </div>

</script>

